<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onBeforeMount, nextTick } from 'vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
const { proxy } = getCurrentInstance()

/* ---- */
const logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const user = reactive({
  avatar: '',
  // ----
  share_title: ''
})
const QR = reactive({
  url: '',
  // ----
  show: false,
  text: '',
  size: 500,
  logoSrc: '',
  logoScale: 0.15,
  logoMargin: 5
})
const forRoute = proxy.$root.$router.options.routes || []

/* ---- */
const layer = ref()

/* ---- */
const findElementInArray = async (arr, target) => {
  for (let i = 0; i < Number(arr.length); i++) {
    if (String(arr[i].name) === String(target)) {
      QR.url = arr[i].path
      break
    } else if (Array.isArray(arr[i].children)) {
      await findElementInArray(arr[i].children, target)
    }
  }
}
// ----
const getCurrencyInfo = async () => {
  await findElementInArray(forRoute, 'AlbumShare')
  // --相册信息--
  const forAlbumData = { params: { 'AlbumCategorySearch[id]': proxy.$route.query.id } }
  await proxy.$Axios.all([
    proxy.$Axios.get('album-category/index', forAlbumData)
  ]).then(proxy.$Axios.spread((albumData) => {
    const AData = albumData.items[0] || {}
    user.share_title = proxy.$Myfun.setText(AData.name)
    proxy.$Myfun.getJsonData(AData.remark, (resJson) => {
      if (resJson[0].share_img && Number(resJson[0].share_img.length) > 0) user.avatar = resJson[0].share_img[0].image
    })
  })).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  const isSlash = (Number(QR.url.indexOf('/')) === -1) ? '/' : ''
  let qrUrl = isSlash + QR.url
  qrUrl += '?id=' + proxy.$route.query.id + '&dealer_id=' + logUser.id + '&sn=' + logUser.sn
  qrUrl = proxy.$siteSrc + qrUrl
  // ----
  QR.text = qrUrl
  QR.logoSrc = user.avatar
  // ----
  nextTick(() => { QR.show = true })
}

/* ---- */
onBeforeMount(() => {
  getCurrencyInfo()
})
</script>

<template>
  <div class="mescroll-touch">
    <div class="user-qr xw-middle-abs xw-bg-white xw-radius-3">
      <div class="UQR-title xw-ellipsis-2" v-if="user.share_title">{{user.share_title}}</div>
      <div class="UQR-con" v-if="QR.show">
        <div class="UQR-img"><vue-qr :logoSrc="QR.logoSrc" :text="QR.text" :size="QR.size" :logoMargin="QR.logoMargin" :logoScale="QR.logoScale"></vue-qr></div>
        <div class="UQR-info">长按识别下载电子相册二维码</div>
      </div>
    </div>
    <layer-view ref="layer"/>
  </div>
</template>

<style scoped>
/* ---- */
.user-qr { padding: 1.2rem; width: 90%; }
.UQR-title { padding: 1rem 0; line-height: 2.5rem; font-size: 1.7rem; }
.UQR-img img { width: 100%; }
.UQR-info { padding: 1rem 0; text-align: center; }
</style>
